<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrapValidator.css"/>
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<!--<link href="css/animate.css" rel="stylesheet">-->
<link href="css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.lyear-login:after{
    content: '';
    min-height: inherit;
    font-size: 0;
}
.login-center {
    background-color: rgba(255,255,255,.075);
    min-width: 29.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 3px;
    margin: 2.85714em;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
    background-color: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.075)
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
.login-center .form-control::-webkit-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-center .form-control:-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-center .form-control::-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-center .form-control:-ms-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
}
.login-center .custom-control-label::before {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
}
.login-center .lyear-checkbox span::before {
    border-color: rgba(255,255,255,.075)
}
</style>
</head>
  
<body>
<div class="row lyear-wrapper" style="background-image: url(images/login-bg-zl.jpg); background-size: cover;">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="api/index.jsp"> <img alt="light year admin" src="images/logo-zl.png"> </a>
      </div>
      <form action="#!" id="defaultForm" method="post">
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input type="text" name="captcha" class="form-control"  id="codeInput" placeholder="验证码">
            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="col-xs-5">
            <img src="/code" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src='/code'+'?d='+Math.random();" title="点击刷新" alt="captcha">
          </div>
        </div>
        <div class="form-group">
          <label class="lyear-checkbox checkbox-primary m-t-10 text-white">
            <input type="radio" value="on" ><span>5天内自动登录</span>
          </label>
        </div>
        <div class="form-group">
          <button class="btn btn-block btn-primary" type="button"  id="login" >立即登录</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<!--<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>-->
<script type="text/javascript">
  $(document).ready(function() {
    var username = getCookie("userInfo1");
    console.log(" 自动登录Cookie:username值为：", username);
    var password = getCookie("userInfo2");
    console.log(" 自动登录Cookie:password值为：", password);
    if (username&&password) {
      $.ajax({
        url:"/al",
        type:"POST",
        data:{username:username,password:password},
        dataType:"JSON",
        success:function (resp){
          if(resp.code===10000){
            lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' , '${pageContext.request.contextPath}/api/index');
          }
        }
      })
    }
  });

  function getCookie(name) {
    let cookieArr = document.cookie.split(";");
    for (let i = 0; i < cookieArr.length; i++) {
      let cookiePair = cookieArr[i].split("=");
      if (name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }


  $("#login").click(function (){
    $("#defaultForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
    if($("#defaultForm").data('bootstrapValidator').isValid()){//判断验证是否已经通过
      $.ajax({
        url:"/login",
        type:"POST",
        data:{username:$("#username").val(),password:$("#password").val(),
          codeInput:$("#codeInput").val(),al:$("input[type='radio']:checked").val()},
        dataType:"JSON",
        success:function (resp){
          if(resp.code===10000){
            lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' , 'api/index.html');
          }else {
            lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
            $(this).delay(1000).queue(function() {
              // 延迟结束后执行的代码
              location.reload();
            });
          }
        }
      })
    }

  })

  // 获取所有的radio按钮
  var radios = document.querySelectorAll('input[type="radio"]');

  // 为每个radio按钮添加点击事件监听器
  radios.forEach(function(radio) {
    radio.addEventListener('click', function() {
      // 如果当前radio已经被选中，则取消选中
      if (radio.dataset.checked === "true") {
        radio.checked = false;
        radio.dataset.checked = "false";
      } else {
        // 如果当前radio未被选中，则标记为已选中
        radios.forEach(function(r) {
          r.dataset.checked = "false";
        });
        radio.dataset.checked = "true";
      }
    });
  });

  /**
   *下面就是bootstrapValidator的初始化
   *定义你需要的哪些表单需要验证，验证什么内容
   **/
  $("#defaultForm").bootstrapValidator({
    feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
      username:{
        validators:{//从这里也可以容易的看出可以有多个验证信息
          notEmpty:{//非空验证
            message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
          },
        }
      },
      password:{
        validators:{
          notEmpty:{
            message:"请输入密码！！！"
          }
        }
      },
      captcha:{
        validators:{
          notEmpty:{
            message:"请输入验证码！！！"
          },
          stringLength: {//长度限制（中文字符也算一个）
            min: 4,
            max: 4,
          }
        }
      }
    }
  });
</script>
</body>
</html>